<template>
  <div v-loading="!show" element-loading-text="数据加载中..." :style="!show ? 'height: 500px' : 'height: 100%'" class="app-container">
    <el-table
      v-if="show"
      lazy
      :data="data"
      row-key="ID"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <span>{{ props.row.SQL }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ID" align="center" prop="ID" width="58" sortable />
      <el-table-column label="SQL" prop="SQL" :show-overflow-tooltip="true" />
      <el-table-column label="执行数" align="center" prop="ExecuteCount" width="80" sortable />
      <el-table-column label="耗时" align="center" prop="TotalTime" width="68" sortable />
      <el-table-column label="最慢" align="center" prop="MaxTimespan" width="68" sortable />
      <el-table-column label="事务执行" align="center" prop="InTransactionCount" width="94" sortable />
      <el-table-column label="错误数" align="center" prop="ErrorCount" width="80" sortable />
      <el-table-column label="更新行数" align="center" prop="EffectedRowCount" width="94" sortable />
      <el-table-column label="读取行数" align="center" prop="FetchRowCount" width="94" sortable />
      <el-table-column label="执行中" align="center" prop="RunningCount" width="80" sortable />
      <el-table-column label="最大并发" align="center" prop="ConcurrentMax" width="94" sortable />
    </el-table>
  </div>
</template>

<script>
import { getSqlList } from '@/api/monitor/druid'

export default {
  name: 'DruidSqlMonitor',
  data() {
    return {
      show: false,
      data: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getSqlList().then(result => {
        this.show = true
        this.data = result.data.data;
        // 转成数字类型, 用于排序
        for (let i = 0; i < result.length; i++) {
          data[i].ID = Number(result[i].ID)
          data[i].ExecuteCount = Number(result[i].ExecuteCount)
          data[i].TotalTime = Number(result[i].TotalTime)
          data[i].MaxTimespan = Number(result[i].MaxTimespan)
          data[i].InTransactionCount = Number(result[i].InTransactionCount)
          data[i].ErrorCount = Number(result[i].ErrorCount)
          data[i].EffectedRowCount = Number(result[i].EffectedRowCount)
          data[i].FetchRowCount = Number(result[i].FetchRowCount)
          data[i].RunningCount = Number(result[i].RunningCount)
          data[i].ConcurrentMax = Number(result[i].ConcurrentMax)
        }

      })
    }
  }
}
</script>
